<template lang="pug">
.home-wrap
    .search-wrap(:style="{left:left,top:top}" )
        el-autocomplete(
            ref="autocomplete"
            class="search-in"
            v-model="searchStr"
            @keyup.enter.native="lucenesearch()"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            :hide-loading="true"
            :select-when-unmatched="true"
            clearable
        )
        .btn-w(@click="lucenesearch()") 搜索
        .clearHis(v-show="left!='47%'" @click="clearHistory()") 清空搜索记录
            //- el-icon(size="16" title="清空搜索记录" @click="clearHistory()")
            //-     Delete
    img(src="@/assets/images/tu.png" v-show="left=='47%'").tu
    .result-w(:style="{width:pdfViewShow?'45%':'100%'}")
        .left-resu
            .result-li(v-for="item in resultList" :key="item.key" :style="{width:pdfViewShow?'100%':'45%'}")
                .doc-list
                    .doc-li
                        .doc-icon
                            img(src="@/assets/images/PDF.png" v-if="item.fileName.indexOf('.pdf')!=-1")
                            img(src="@/assets/images/word1.png" v-if="item.fileName.indexOf('.doc')!=-1||item.fileName.indexOf('.docx')!=-1")
                            img(src="@/assets/images/EXCEL.png" v-if="item.fileName.indexOf('.xlsx')!=-1||item.fileName.indexOf('.xls')!=-1")
                        el-button(link type="primary" @click="fileViewShow(item)") {{item.fileName}}
                        el-button(link type="info" @click="cyFiledownloadById(item)" size="small") 下载
                .li-cont(v-for="(it,i) in item.allMatch" :key="item.key" @dblclick="bClick(item)")
                    div(v-html="it" :class="{hoverLight:pdfViewShow&&choseFile.fileId==item.fileId}" @click="searchTo(item)" style="white-space: pre-wrap;word-break: break-all;")
                //- .li-cont
                //-     div(v-html="item.bestMatch" :class="{hoverLight:pdfViewShow&&choseFile.fileId==item.fileId}" @click="searchTo(item)" style="white-space: pre-wrap;word-break: break-all;")

                //- .yin
                //-     span “引用
                //-     .line
        .right-cont(v-if="left!='47%'")
            .title 热搜词汇
            .hot-word(style="width:300px")
                el-button(link type="primary" @click="searchStr=item.content;lucenesearch();" v-for="(item,i) in hotWordList" :key="item")
                    span {{item.content}}
                    img(src="@/assets/images/火苗.png" v-if="i<3")
            .title 热门文件
            .hot-word()
                .hot-li(v-for="(item,i) in hotFileList" :key="item")
                    el-button(link type="primary" @click="fileViewShow(item,'全屏')")
                        span {{item.fileName}}
                        img(src="@/assets/images/火苗.png" v-if="i<3")
                    el-button(link type="info" @click="cyFiledownloadById(item)" size="small") 下载
        .right-pdf(v-if="pdfViewShow")
            pdfView(:src="fileUrl" ref="pdfViewRef" :allFullScreen="allFullScreen" :showClose="true" @close="pdfViewShow=false" v-if="fileType=='pdf'" @loaded="pdfLoaded()")
            //- wordView(:src="fileUrl" :showClose="true" @close="pdfViewShow=false" v-if="fileType=='doc'||fileType=='docx'")
            //- excelView(:src="fileUrl" :showClose="true" @close="pdfViewShow=false" v-if="fileType=='xlsx'||fileType=='xls'")
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { storageGet, storageClear, storageSet } from '@/utils'
import apis from '@/apis'
import { success, warning } from '@/utils/message'
import { muenStore } from '@/stores'
import pdfView from '@/components/pdfView.vue'
import wordView from '@/components/wordView.vue'
import excelView from '@/components/excelView.vue'
import fileView from '@/components/fileView.vue'//预览
const route = useRoute()
watch(() => route.path, (val) => {
    pdfViewShow.value = false
})
onMounted(()=>{
    getHotSearchList()
    getHotReviewFileList()
})
//热搜词汇
const hotWordList = ref([])
const getHotSearchList = () => {
    hotWordList.value = []
    apis.getHotSearchList().then(res => {
        if (res.status == 1){
            hotWordList.value = res.data
        }
    })
}
//热门文件
const hotFileList = ref([])
const getHotReviewFileList = () => {
    apis.getHotReviewFileList().then(res => {
        if (res.status == 1){
            hotFileList.value = res.data
        }
    })
}

// 搜索框
const left = ref('47%')
const top = ref('20%')
const searchStr = ref('')
const options = ref([{
    label: '1'
}])

//pdf
const pdfViewShow = ref(false)
window.pdfViewShow = pdfViewShow
const fileUrl = ref('')

const fileType = ref('')
const choseFile = ref({})
//预览
const allFullScreen = ref(true)
const fileViewShow = (item, type) => {
    allFullScreen.value = true
    choseFile.value = item
    let arr = item.fileName.split('.')
    fileType.value = arr[arr.length - 1]
    fileUrl.value = window.Config.baseURL + '/api/cyFile/downloadById?type=2&id=' + (item.fileId || item.id) + '&accessToken=' + storageGet('token')
    pdfViewShow.value = true
    if(type == '全屏'){
        setTimeout(()=>{
            pdfViewRef.value.allFull()
            allFullScreen.value = false
        }, 10)

    }
}
//加载完-定位
const pdfViewRef = ref()
const pdfLoaded = () => {
    let st = ''
    choseFile.value.allMatchArr.forEach(val => {
        if(val.length > st.length){
            st = val
        }
    })
    if(dbclickStr){
        st = dbclickStr
        dbclickStr = ''
    }
    setTimeout(() => {
        searchL(st)
        $('#viewOutline')[0].click()
    }, 100)
}
//定位
const searchL = (st) => {
    pdfViewRef.value.searchLocation(st)
}
//双击关键字
let dbclickStr = ''
const bClick = (item) => {
    if(pdfViewShow.value && choseFile.value.fileId == item.fileId){
        return
    }
    if(window.event.target.tagName == 'B'){
        dbclickStr = window.event.target.parentNode.textContent
        fileViewShow(item)
    }
}
//点击定位
const searchTo = item => {
    if(pdfViewShow.value && choseFile.value.fileId == item.fileId){
        let st = window.event.target.textContent
        if(window.event.target.tagName == 'B'){
            st = window.event.target.parentNode.textContent
        }
        searchL(st)
    }
}
//下载
const cyFiledownloadById = (row) => {
    if(row){
        apis.cyFiledownloadById({
            id: row.fileId || row.id,
            type: 1
        })
    }
}
const remoteMethod = (query) => {
    if (query){
        setTimeout(() => {
            options.value = [{
                label: '1'
            }]
        }, 200)
    } else {
        options.value = []
    }
}

const autocomplete = ref()
//搜索记录
const querySearch = (queryString, cb) =>{
    let arr = storageGet('searchRecord') || []
    let arr2 = arr.filter(item => item.indexOf(queryString) > -1)
    cb(arr2.map(item=>{
        return {
            value: item
        }
    }))
}
const clearHistory = () => {
    storageClear('searchRecord')
    autocomplete.value.blur()
    autocomplete.value.focus()
    success('搜索记录已清空')
}

//搜索
const lucenesearch = () => {
    left.value = '350px'
    top.value = '10px'
    // setTimeout(() => {
    //     document.body.click()
    // }, 50)
    resultList.value = []
    apis.lucenesearch({
        searchStr: searchStr.value
    }).then(res => {
        if (res.status == 1){
            //搜索记录保存
            let arr = storageGet('searchRecord') || []
            let has = false
            arr.forEach(val => {
                if (val == searchStr.value){
                    has = true
                }
            })
            if (!has){
                arr.unshift(searchStr.value)
            }
            if(arr.length > 10){
                arr.length = 10
            }
            storageSet('searchRecord', arr)
            //从新拼写搜索结果
            res.data.forEach(item => {
                item.allMatchArr = []
                item.allMatch.forEach((it, k) => {
                    if(it){
                        let arr1 = it.split('\n')
                        arr1.forEach(va => {
                            item.allMatchArr.push(va)
                        })
                        arr1 = arr1.map(i=>{
                            if(i.length > 0 && i.trim()){
                                return'<p>' + i + '</p>'
                            }
                        })
                        item.allMatch[k] = arr1.join('')
                    }

                })
                // item.allMatchArr = item.bestMatch.split('\n')
                // let arr1 = item.allMatchArr.map(i=>'<p>' + i + '</p>')
                // item.bestMatch = arr1.join('')
            })
            resultList.value = res.data
        }
    })
}

//搜索结果
const resultList = ref([])

</script>
<style lang="less" scoped>
.home-wrap{
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 66px;
    overflow: hidden;
    .search-wrap{
        width: 600px;
        height: 46px;
        display: flex;
        align-items: center;
        position: absolute;
        transform: translateX(-50%);
        box-shadow: 0 0 10px #eee;
        .btn-w{
            width: 100px;
            line-height: 46px;
            height: 100%;
            text-align: center;
            background: #409eff;
            color: #fff;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            cursor: pointer;
            &:active{
                opacity: .9;
            }
        }
        .clearHis{
            white-space: nowrap;
            font-size: 12px;
            color: #666;
            position: absolute;
            left: 102%;
            cursor: pointer;
            &:hover{
                color: #409eff;
            }
        }
        :deep(.el-autocomplete){
            flex-grow: 1;
            height: 100%;
            .el-input{
                height: 100%;
            }
            .el-input__wrapper{
                font-size: 16px;
            }
        }
    }
    .tu{
        top:40%;
        left: 45.5%;
        position: absolute;
        transform: translateX(-50%);
        width: 300px;
        border-radius: 5px;
    }
    .result-w{
        overflow: hidden;
        flex-grow: 1;
        height: 100%;
        .left-resu{
            height: 100%;
            overflow: auto;
        }
        .right-pdf{
            width: 55%;
            flex-shrink: 0;
            border-left: 1px solid #ccc;
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            background: #fff;
            overflow: hidden;
            padding-right: 5px;
            padding-bottom: 5px;
        }
        .right-cont{
            position: absolute;
            right: 25%;
            transform: translateX(60%);
            top: 100px;
            .title{
                font-size: 20px;
                font-weight: bold;
                line-height: 40px;
                margin-top: 30px;
            }
            .hot-word{
                display: flex;
                flex-wrap: wrap;
                width: 300px;
                font-size: 16px;
                img{
                    width: 15px;
                    height: 15px;
                }
            }
            .hot-word{
                display: flex;
                flex-wrap: wrap;
                width: 400px;
                :deep(.el-button){
                    margin-left: 0;
                    margin-right: 20px;
                    margin-bottom: 10px;
                    &:last-child{
                        margin-right: 0;
                    }
                }
                .hot-li{
                    width: 100%;
                    display: flex;
                    margin-bottom: 5px;
                    line-height: 30px;
                }
            }

        }
        .result-li{
            width: 45%;
            margin-bottom: 10px;
            border-bottom:1px solid #ccc;
            padding: 0 10px 0 30px;
            .li-cont{
                padding: 10px 0;
                display: flex;
                font-size: 14px;
                line-height: 18px;
                border-bottom: 2px dotted #ccc;
                &:last-child{
                    border-bottom: none;
                }
            }
            .yin{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 20px 0;
                span{
                    font-weight: bold;
                }
                .line{
                    flex-grow: 1;
                    height: 0px;
                    border-bottom: 1px dashed #ccc;
                    margin-left: 20px;

                }
            }
            .doc-li{
                display: flex;
                align-items: center;
                img{
                    width: 30px;
                    height: 30px;
                }
            }
        }
    }
}
:deep(.el-button){
    span{
        white-space: pre-wrap;
        text-align: left;
        min-width: 30px;
    }
}
</style>
<style>
.hoverLight{
    p:hover{
        color: blue;
        text-decoration: underline;
    }

}
.el-popper.is-loading{
    display: none;
}
b{
    font-weight: bold;
    font-size: 15px;
    text-decoration: underline;
    color: blue;
}
</style>